<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ include file="../taglibs.jsp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="${webroot}/css/style.css" />
<link rel="stylesheet" type="text/css" href="${webroot}/scripts/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="${webroot}/scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${webroot}/scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="${webroot}/scripts/ext/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="${webroot}/scripts/jquery.js"></script>
<script type="text/javascript">
<!--

Ext.BLANK_IMAGE_URL = '${webroot}/include/ext/resources/images/default/s.gif';

Ext.namespace('HaiChuan');

// Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
    daterange : function(val, field) {
        var date = field.parseDate(val);

        if(!date){
            return;
        }
        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = Ext.getCmp(field.startDateField);
            start.setMaxValue(date);
            start.validate();
            this.dateRangeMax = date;
        }
        else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = Ext.getCmp(field.endDateField);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        }
        /*
         * Always return true since we're only using this vtype to set the
         * min/max allowed values (these are tested for after the vtype test)
         */
        return true;
    },

    password : function(val, field) {
        if (field.initialPassField) {
            var pwd = Ext.getCmp(field.initialPassField);
            return (val == pwd.getValue());
        }
        return true;
    },

    passwordText : '密码不匹配'
});

Ext.onReady(function(){

    Ext.QuickTips.init();

    HaiChuan.contextPath = '${webroot}';

    var fp = new Ext.FormPanel({
        id: 'reg-form',
        renderTo: 'reg-div',
        labelWidth: 110,
        width: 600,
        autoHeight: true,
        border: false,
        bodyStyle: 'padding:10px 10px 0;',
        defaults: {
            anchor: '95%',
            allowBlank: false,
            selectOnFocus: true,
            msgTarget: 'side'
        },
        items: [{
            xtype: 'textfield',
            name: 'loginName',
            fieldLabel: '<font color="red">*</font>用户名',
            blankText: '请填写用户名',
            minLength: 3,
            maxLength: 15,
            minLengthText: '用户名小于3个字符, 请输入一个较长的用户名。',
            maxLengthText: '用户名超过15个字符，请输入一个较短的用户名。',
            validator: function(value){
                if(!(/^[A-Za-z0-9_-]+$/.test(value))) {
                    return '用户名包含不合法字符，请重新填写。';
                } else {
                    var resultText, result;
                    resultText = $.ajax({ 
                        type: "POST",
                        url: HaiChuan.contextPath + "/ajax/user/validateLoginName.do",
                        data: "loginName=" + value,
                        async: false // 同步请求
                    }).responseText;

                    try {
                        result = Ext.decode(resultText);
                    } catch (e) {
                        return true;
                    }
                    if (!Ext.isEmpty(result.success) && result.success) {
                        return true;
                    } else if (!Ext.isEmpty(result.msg)) {
                        return result.msg;
                    }
                }
                return true;
            }
        },{
            xtype: 'textfield',
            id: 'password',
            name: 'password',
            fieldLabel: '<font color="red">*</font>密码',
            inputType: 'password',
            blankText: '请填写密码',
            minLength: 6,
            maxLength: 16,
            minLengthText: '密码小于6个字符, 请输入一个较长的密码。',
            maxLengthText: '密码超过16个字符，请输入一个较短的密码。'
        },{
            xtype: 'textfield',
            name: 'password2',
            inputType: 'password',
            fieldLabel: '<font color="red">*</font>确认密码',
            blankText: '请填写确认密码',
            vtype: 'password',
            initialPassField: 'password' // id of the initial password field
        },{
            xtype: 'textfield',
            name: 'userName',
            fieldLabel: '<font color="red">*</font>姓名',
            blankText: '请填写姓名',
            maxLength: 64,
            maxLengthText: '姓名超过64个字符，请输入一个较短的姓名。'
        },{
            xtype: 'textfield',
            name: 'email',
            fieldLabel: '<font color="red">*</font>电子邮件',
            blankText: '请填写电子邮件',
            maxLength: 64,
            maxLengthText: '姓名超过64个字符，请输入一个较短的电子邮件。'
        }
        ],
        buttons: [{
            text: '提交',
            handler: function(){
                if(fp.getForm().isValid()){
                    fp.getEl().mask();
                    var form = fp.getForm().getEl().dom;
                    form.onsubmit = Ext.emptyFn;
                    form.action = HaiChuan.contextPath + '/user/register.do';
                    form.submit();
                }
            }
        },{
            text: '重填',
            handler: function(){
                fp.getForm().reset();
            }
        }]
    });

    new Ext.Panel({
        title: '填写注册信息',
        renderTo: 'reg-div',
        width: 600,
        autoHeight: true,
        items: fp
    });

});

//-->
</script>
</head>
<body>
<div><iframe src="${webroot}/jsp/user/header.jsp" width="100%" height="79" scrolling="no" frameborder="0" name="header" id="header"></iframe></div>
<br/>
<center>
<div style="width:764px;">
  <div><img src="${webroot}/images/reg11_2.jpg" width="764" height="109" /></div>
  <div style="text-align:left; padding-right:60px; padding-left:60px; background:url(${webroot}/images/regtablemidlle.jpg);">
    <div id="msg" style="padding-top:20px; padding-bottom:20px; color:#ff8080; font-size:12px">
    	<s:fielderror></s:fielderror>
    </div>
    <div id="reg-div"></div>
  </div>
  <div><img src="${webroot}/images/regtabledeep.jpg" width="764" height="26" /></div>
</div>
</center>
<br/>
<div><iframe src="${webroot}/jsp/user/footer.jsp" width="100%" height="29" scrolling="no" frameborder="0" name="footer" id="footer"></iframe></div>
</body>
</html>
